<template>
  <div v-load="{ color: 'red', isShow: onloading }">home</div>
  <div @click="onClick('/list')">list</div>
  <div @click="onClick('/about')">about</div>
  <div @click="onClick('/video')">video</div>
  <div @click="onClick('/iconfont')">iconfont</div>
  <div @click="onClick('/realTime')">Real time time</div>
  <div @click="onClick('/htmlTocanvas')">HTML生成canvas</div>
  <div @click="onClick('/lodash')">lodash</div>
  <div @click="onClick('/echarts')">echarts</div>
  <div @click="onClick('/dragDialog')">dragDialog</div>
  <div @click="onClick('/pinia')">pinia</div>
  <div @click="onClick('/table')">table</div>
  <div @click="onClick('/map')">map</div>
  <div @click="onClick('/upload')">upload</div>
  <div @click="onClick('/leaflet')">leaflet</div>
  <div @click="onClick('/drawer')">drawer</div>
  <div @click="onClick('/roll')">Rolling monitoring</div>
  <div @click="onClick('/tsparticles')">tsparticles</div>
  <div @click="onClick('/camera')">camera</div>
  <div @click="onClick('/cropperjs')">cropperjs</div>
  <!-- <svg-icon width="30" height="30" name="icon-qianbao" color="#b287fe" /> -->
</template>


<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance
} from 'vue'
import { useRouter } from 'vue-router'



const router = useRouter()

let onloading = ref(true)
setTimeout(() => {
  onloading.value = false
}, 2000)

const onClick = (path) => {
  router.push({ path })
}
</script>


<style lang="scss" scoped></style>